<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <!-- 列表结构 -->
    <fieldset v-if="isLogin">
        <legend>列表页</legend>

        <h1>
            <img width="50" :src="userInfo.headimgurl" alt="">
            <span>
                    昵称:{{userInfo.nickname}}
                </span>
        </h1>
        <button @click="isLogin=false">退出登入</button>
        <ul>
            <li v-for="item in list" :key="item._id">
                <img width="150" :src="item.headimgurl" alt="">
                <b>{{item.name}}</b>

                <button v-has:add="permissionBtns">增加</button>
                <button v-has:read="permissionBtns">查看</button>
                <button v-has:edit="permissionBtns">编辑</button>
                <button v-has:delete="permissionBtns">删除</button>
            </li>
        </ul>
    </fieldset>
    <!-- 登入结构 -->
    <fieldset class="login" v-else>
        <legend>登入页</legend>
        用户名:
        <input type="text" v-model="username">
        <br>
        密码:
        <input type="password" v-model="password">
        <br>
        <button @click="login">登入</button>
    </fieldset>

</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    //鉴权的类型

    //1.菜单鉴权

    //2.路由鉴权

    //3.按钮级的鉴权

    //按钮鉴权的实现思路

    //1.先登入,获取用户的按钮权限数据

    //2.声明一个自定义指令 v-has

    //3.将用户的按钮权限数据,通过指令参数的编写方式,传入到指令内部钩子函数

    //4.钩子函数inserted中,通过判断对比当前角色是否具备该按钮权限,如果没有,核心逻辑el.parentNode.removeChild(el)

    let vm = new Vue({
        el: "#app",
        //局部自定义指令
        directives: {
            has: {
                inserted(el, binding) {
                    // console.log(el, binding)
                    // console.log(binding.value)
                    // console.log(binding.arg)

                    //判断用户的按钮权限数组中是否包含,当前这个按钮应该具备的权限字段
                    if (!binding.value.includes(binding.arg)) {
                        //当前用户的按钮权限数组中没有当前按钮应该具备的权限字段
                        //那么移除掉这个按钮
                        // el.parentNode.removeChild(el)
                        el.disabled = true
                    }
                }
            }
        },
        data: {
            //这个字段用于控制用户是否登入
            isLogin: false,
            username: "",
            password: "",
            // 用户信息
            userInfo: {},
            //列表数据
            list: [],
            //角色具有的按钮权限数据
            permissionBtns: []
        },
        methods: {
            login() {
                //1.获取用户名和密码

                //2.发起登入请求,传递用户名和密码

                //3.接收后台返回的结果

                //4.存储用户的button权限

                //5.按钮根据不同的角色,展示不同的按钮

                //6.展示列表的内容

                fetch("http://chst.vip/users/login", {
                    method: 'post',//请求方式
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        username: this.username,
                        password: this.password
                    })
                })
                    .then(body => body.json())
                    .then(res => {
                        console.log(res)
                        //登入成功
                        if (res.state) {
                            //给data中的permissionBtns赋值
                            this.permissionBtns = res.permission.buttons
                            //存储按钮权限
                            localStorage.setItem('btns', JSON.stringify(res.permission.buttons))
                            //存储token,服务器发给客户端的令牌,用于认证客户端的身份
                            localStorage.setItem('qtoken', res.token)
                            //将登入状态变成true
                            this.isLogin = true
                            //修改data中的userInfo
                            this.userInfo = res.userInfo

                            //获取列表,发起获取列表的请求
                            fetch('http://chst.vip/students/getstulist?count=15', {
                                //将获取的token携带在请求头里面
                                headers: {
                                    authorization: localStorage.getItem('qtoken')
                                }
                            })
                                .then(body => body.json())
                                .then(res => {
                                    console.log(res)
                                    //给data中的list赋值
                                    if (res.state) {
                                        //数据获取成功
                                        this.list = res.data;
                                    } else {
                                        //数据获取出错
                                        alert(res.msg)
                                    }
                                })

                        } else {
                            alert(res.msg)
                        }
                    })
            }
        }
    })
</script>